<template>
    <div class="container">
        <Category />
        <Banner />
    </div>
    <New />
    <Hot />
    <Product />
</template>

<script setup>
import Banner from './components/banner.vue';
import New from './components/new.vue';
import Hot from './components/hot.vue';
import Category from './components/category.vue';
import Product from './components/product.vue';

import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'
import { useHomeStore } from '@/stores/home';

const homeStore = useHomeStore();
const userStore = useUserStore();
const cartStore = useCartStore();
const { userInfo } = storeToRefs(userStore);

onMounted(async () => {
    homeStore.getBannerList();
    homeStore.getNewList();
    homeStore.getHotList();
    homeStore.getGoodsList();
    let token = userInfo?.value?.token
    if (token) {
        await cartStore.mergeCarts()
    }
})
</script>

